// useFullScreen.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useFullScreen() {
  const isFullScreen = ref(false);

  const updateFullScreen = () => {
    isFullScreen.value = !!(document.fullscreenElement || 
                             document.webkitFullscreenElement ||
                             document.mozFullScreenElement ||
                             document.msFullscreenElement);
  };

  onMounted(() => {
    document.addEventListener('fullscreenchange', updateFullScreen);
    document.addEventListener('webkitfullscreenchange', updateFullScreen);
    document.addEventListener('mozfullscreenchange', updateFullScreen);
    document.addEventListener('MSFullscreenChange', updateFullScreen);
  });

  onUnmounted(() => {
    document.removeEventListener('fullscreenchange', updateFullScreen);
    document.removeEventListener('webkitfullscreenchange', updateFullScreen);
    document.removeEventListener('mozfullscreenchange', updateFullScreen);
    document.removeEventListener('MSFullscreenChange', updateFullScreen);
  });

  return {
    isFullScreen
  };
}